<template>
  <div>
    <el-dialog
      v-if="dialog"
      v-dialogDrag="dialog"
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="dialog"
      width="60%"
    >
      <el-form
        ref="bottomActionForm"
        :model="bottomActionForm"
        :rules="bottomActionRules"
        label-suffix=" :"
        label-width="100px"
      >
        <el-form-item label="值集代码" prop="code">
          <el-input v-model.trim="bottomActionForm.valueSetCode" disabled />
        </el-form-item>
        <el-form-item label="值代码" prop="val">
          <el-input
            v-model.trim="bottomActionForm.val"
            :disabled="title === '编辑值代码明细'"
          />
        </el-form-item>
        <el-form-item label="起始日期" prop="validStartDate">
          <el-date-picker
            v-model="bottomActionForm.validStartDate"
            :picker-options="pickerOptions"
            :popper-class="'currentDatePickerClass'"
            style="width: 100%"
            type="date"
            align="right"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="终止日期" prop="validEndDate">
          <el-date-picker
            v-model="bottomActionForm.validEndDate"
            :picker-options="pickerOptions"
            :popper-class="'currentDatePickerClass'"
            style="width: 100%"
            type="date"
            align="right"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="值集描述" prop="valueDesc">
          <el-input v-model.trim="bottomActionForm.valueDesc" type="textarea" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="bottomActionForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false"> 取 消 </el-button>
        <el-button
          v-oauth data-oauthUuid="1620437792000"
          type="primary"
          :loading="loading"
          @click="descOnSubmit('bottomActionForm')"
        >
          {{ loading ? "提交中 ..." : "确定" }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from "@/utils/index";
import { saveDesc, updateDesc } from "@/api/valuesetDesc";

export default {
  name: "Childcode",
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          const timeNow = new Date();
          return time.getTime() < timeNow.getTime() - 86400000;
        },
      },
      title: "",
      dialog: false,
      bottomActionRules: {
        valueSetCode: [
          { required: true, message: "请输入值集代码", trigger: "blur" },
        ],
        val: [{ required: true, message: "请输入值代码", trigger: "blur" }],
        validStartDate: [
          { required: true, message: "请选择日期", trigger: "blur" },
        ],
        validEndDate: [
          { required: true, message: "请选择日期", trigger: "blur" },
        ],
      },
      bottomActionForm: {},
      loading: false,
    };
  },
  methods: {
    show(valueSetCode, data) {
      if (data) {
        this.title = "编辑值代码明细";
        this.bottomActionForm = deepClone(data);
      } else {
        this.title = "新增值代码明细";
        this.bottomActionForm = {
          valueDesc: "",
          valueSetCode: valueSetCode,
          validStartDate: "",
          validEndDate: "",
          val: "",
          remark: "",
        };
      }
      this.dialog = true;
    },
    close() {
      this.dialog = false;
      this.$emit("refresh");
    },
    descOnSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.title == "新增值代码明细") {
            this.docreat();
          } else {
            this.domodify();
          }
        } else {
          return false;
        }
      });
    },
    docreat() {
      saveDesc(null, {
        valueDesc: this.bottomActionForm.valueDesc,
        valueSetCode: this.bottomActionForm.valueSetCode,
        validStartDate: this.bottomActionForm.validStartDate,
        validEndDate: this.bottomActionForm.validEndDate,
        val: this.bottomActionForm.val,
        remark: this.bottomActionForm.remark,
      })
        .then((res) => {
          this.$message.success("添加成功");
          this.close();
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
    domodify() {
      updateDesc(null, {
        id: this.bottomActionForm.id,
        valueDesc: this.bottomActionForm.valueDesc,
        valueSetCode: this.bottomActionForm.valueSetCode,
        validStartDate: this.bottomActionForm.validStartDate,
        validEndDate: this.bottomActionForm.validEndDate,
        val: this.bottomActionForm.val,
        remark: this.bottomActionForm.remark,
      })
        .then((res) => {
          this.$message.success("修改成功");
          this.close();
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
